<template>
  <grimm-page title="Badge">
    <div slot="content">
      <section>
        <h1 class="example-page-title">自定义内容</h1>
        <div class="badge-owner">
          <grimm-badge class="badge" value="New" />
        </div>
      </section>

      <section>
        <h1 class="example-page-title">大于maxNumber的数字</h1>
        <h2 class="subheader">此处设置 maxNumber 为99，所传数字为150</h2>
        <div class="badge-owner">
          <grimm-badge class="badge" :value="150" />
        </div>
      </section>

      <section>
        <h1 class="example-page-title">十位数</h1>
        <div class="badge-owner">
          <grimm-badge class="badge" :value="66" />
        </div>
      </section>

      <section>
        <h1 class="example-page-title">个位数</h1>
        <div class="badge-owner">
          <grimm-badge class="badge" :value="6" />
        </div>
      </section>

      <section>
        <h1 class="example-page-title">小圆点</h1>
        <h2 class="subheader">设置 isDot 为 true</h2>
        <div class="badge-owner">
          <grimm-badge class="badge badge-dot" :isDot="true" />
        </div>
      </section>
    </div>
  </grimm-page>
</template>

<script>
import GrimmPage from '../../components/GrimmPage.vue';
export default {
  components: {
    GrimmPage,
  },
  data() {
    return {
    };
  },
};
</script>
<style lang="stylus" scoped>
section {
  margin-bottom 16px
}
.subheader {
  margin-bottom 15px
}
.badge-owner {
  position relative
  width 40px
  height 40px
  border-radius 8px
  background #eee
}
.badge {
  position absolute
  right -8px
  top -8px
}
.badge-dot {
  right -2px
  top -4px
}
</style>

